<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80px" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="channelName" label="渠道" />
      <el-table-column prop="condition" label="条件" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" size="mini" type="primary" plain>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialog.type === 1 ? '新增产品' : '编辑产品'" width="480px" :visible.sync="dialog.visible" :close-on-click-modal="false">
      <el-form ref="form" :model="dialog" :rules="rules" label-width="90px">
        <el-form-item label="产品名称:" prop="content.name">
          <el-input v-model="dialog.content.name"></el-input>
        </el-form-item>
        <el-form-item label="渠道名称:" prop="content.channelId">
          <el-select style="width: 100%" v-model="dialog.content.channelId" clearable placeholder="请选择">
            <el-option v-for="item in productChannelList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="条件:">
          <el-input v-model="dialog.content.condition" type="textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="d-flex justify-center">
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updateProduct, addProduct } from "@/api/product";
export default {
  name: "ProductListTable",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    productChannelList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialog: {
        visible: false,
        type: 1,
        content: {
          id: "",
          name: "",
          channelId: "",
          condition: "",
        },
      },
      rules: {
        "content.name": [
          {
            required: true,
            message: "产品名称不能为空",
            trigger: "blur",
          },
        ],
        "content.channelId": [
          {
            required: true,
            message: "渠道不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    "dialog.visible": {
      handler(val) {
        if (val) return;
        this.dialog = {
          visible: false,
          type: 1,
          content: {
            id: "",
            name: "",
            channelId: "",
            condition: "",
          },
        };
      },
    },
  },
  methods: {
    edit(row) {
      const content = {};
      Object.keys(this.dialog.content).forEach((key) => {
        content[key] = row[key];
      });
      this.dialog = {
        visible: true,
        type: 2,
        content,
      };
    },
    async handleConfirm() {
      const valid = await this.$refs["form"].validate();
      if (!valid) return;
      const { type } = this.dialog;
      type === 1 ? this.addProduct() : this.updateProduct();
    },
    async updateProduct() {
      const res = await updateProduct(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.$parent.getProductList();
      this.$message.success("编辑产品成功!");
    },
    async addProduct() {
      const res = await addProduct(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.$parent.page.page = 1;
      this.$parent.getProductList();
      this.$message.success("添加产品成功!");
    },
  },
};
</script>
